$(function(){
  //1.首页渲染
  // 2.分页
  // 3.添加一级分类


  var currentPage =1;
  var pageSize =5;
  // 1.首页渲染
  function render(){
    $.ajax({
    type: 'get',
    url: '/category/querySecondCategoryPaging',
    data:{
      page:currentPage,
      pageSize:pageSize,
    },
    dataType: 'json',
    success: function (res) {
      $('tbody').html(template('tmp',res));
      // 根据数据库生成分页标签
      setPage(res.total)
    }
    })
  }
  render();


  
  // 2.生成分页标签 total数据总数
   // 分页
   function setPage (total){
    $('#paginator').bootstrapPaginator({
      bootstrapMajorVersion:3,//版本信息
      currentPage:currentPage,//当前页
      totalPages:Math.ceil(total/pageSize),//总页数 math.ceil取整数
      // size:'small',//设置控件的大小
      onPageClicked:function (event,originalEvent,type,page) {
        //绑定点击事件
        currentPage = page;
        render();
      }
    })
  }
  // setPage(12)


  // 3.下拉菜单填充
    $.ajax({
    type: 'get',
    url: '/category/querySecondCategoryPaging',
    data:{
      page:1,
      pageSize:100,
    },
    dataType: 'json',
    success: function (res) {
      $('.cate-one-list').html(template('tmp-one',res));
      // 根据数据库生成分页标签
      setPage(res.total)
    }
    })



  // 4.模拟下拉列表选中
  $('.cate-one-list').on('click','a',function(){
    $('.cate-btn').text($(this).text());
    $('#categoryId').val($(this).data('id'));
    // .手动回复失败状态
    $('.form-add').data('bootstrapValidator').updateStatus('categoryId','VALID')
  })

  // 5.图片上传
  $("#file").fileupload({
    dataType:"json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done:function (e, data) {
      console.log(data);
      var url=data.result.picAddr
      // 图片预览
      $('#img').attr('src',url);
      // 隐藏域保存
      $('#brandLogo').val(url);
      // 手动回复状态
    $('.form-add').data('bootstrapValidator').updateStatus('brandLogo','VALID')

    }
})

  // 6.表单非空检验
   //使用表单校验插件
$('.form-add').bootstrapValidator({
  //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
  excluded: [':disabled'],

  //2. 指定校验时的图标显示，默认是bootstrap风格
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },

  //3. 指定校验字段
  fields: {
    //校验用户名，对应name表单的name属性
    categoryId: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请选择一级分类'
        },
      }
    },
    categoryName: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请输入二级分类'
        },
      }
    },
    brandLogo: {
      validators: {
        //不能为空
        notEmpty: {
          message: '请上传图片'
        },
      }
    },
  }

})

  // 7.手动回复失败状态

  // 8.添加二级分类
  $('.form-add').on('success.form.bv',function(e){
    e.preventDefault();//阻止默认行为
    $.ajax({
    type: 'post',
    url: '/category/addSecondCategory',
    data:$('.form-add').serialize(),
    dataType: 'json',
    success: function (res) {
      render();
      //隐藏模态框
      $('.modal-add').modal('hide');
      //表单重置 数据样式
      $('.form-add').data('bootstrapValidator').resetForm(true);
      //手动回复图片和文字默认
      $('#img').attr('src','images/none.png')
      $('.cate-btn').text('请选择一级分类')
    }
    })
  })

})